<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col>
        <div v-if="is_admin_view == 0">
          <el-button type="primary" v-if="handelChange" @click='handelChange = false'>设置推送名单</el-button>
        </div>
      </el-col>
    </el-row>
    <div v-if="handelChange">
      <el-table style="width:90%" :header-cell-style="{ background: '#F3F8FE' }" @row-click="rowClick" align="center"
        :data="ListArr" border class="tableHeight">
        <el-table-column align="center" prop="pime" label="消息时间">
        </el-table-column>
        <!-- <el-table-column
             align="center"
               prop="type"
               label="消息类型"
               >
             </el-table-column> -->
        <el-table-column align="center" prop="title" width="380" label="消息标题">
        </el-table-column>
        <el-table-column align="center" prop="names" label="接收名单">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button class="see" @click="see(scope.row.id)" type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="width:90%">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.page" :page-size="page.page_size" layout="total, prev, pager, next, jumper"
          :total="page.count" align='left'></el-pagination>
      </div>
    </div>
    <div v-else>
      <el-table style="width:90%" class="tableHeight" @row-click="rowClick" align="center" :data="pushList" border>
        <el-table-column align="center" prop="name" label="姓名">
        </el-table-column>
        <el-table-column align="center" prop="position" label="职位">
        </el-table-column>
        <el-table-column align="center" prop="email" label="邮箱地址">
        </el-table-column>
        <el-table-column align="center" prop="ctime" label="添加时间">
          <template slot-scope="scope">
            <span>{{scope.row.ctime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-popconfirm title="确定删除吗？" @confirm="deleteUser(scope.row.id)">
              <el-button slot="reference" class="deletText" type="text">删除</el-button>
            </el-popconfirm>
            <!-- <el-button class="deletText" @click="deleteUser(scope.row.id)" type="text">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-top:20px;">
        <el-button type="primary" @click='dialogVisible = true'>添加名单</el-button>
        <el-button type="info" @click='handelChange = true'>返回</el-button>
      </div>
    </div>

    <el-dialog :close-on-click-modal='false' title="设置推送用户" :visible.sync="dialogVisible" width="30%"
      :before-close="handleClose">
      <p class="input_item">
        <el-input v-model="add.name" placeholder="请输入姓名"></el-input>
      </p>
      <p class="input_item">
        <el-input maxlength="11" v-model="add.mobile" placeholder="请输入手机号"></el-input>
      </p>
      <p class="input_item">
        <el-input v-model="add.email" placeholder="请输入邮箱"></el-input>
      </p>
      <p class="input_item">
        <el-input v-model="add.position" placeholder="请输入职位"></el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="dialogVisible = false">取消操作</el-button>
        <el-button type="button" class="pubBtn" style="width:98px;" @click="addSave">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog destroy-on-close :close-on-click-modal='false' title="查看证书" :visible.sync="certificateType"
      @close="cancelAdd" width="40%" :before-close="handleClose_">
      <el-form ref="form" :model="seeData" label-width="120px">
        <el-form-item label="证书编号">
          <el-input v-model="seeData.num" disabled></el-input>
        </el-form-item>
        <el-form-item label="证书名称">
          <el-input v-model="seeData.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="证书类型">
          <el-input v-model="seeData.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="证书有效期">
          <el-date-picker disabled v-model="seeData.time" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
            type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="证书图片">
          <el-upload class="upload-demo" accept=".jpg,.jpeg,.png,.gif" :action=action list-type="picture-card"
            :on-preview="handlePreview" disabled :file-list="seeData.img">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img style="position: absolute;" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog append-to-body :visible.sync="dialogVisibleImg">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { pushIndex, pushAdd, tuserList, pushDelete, certificateList } from "@/api"
import { VUE_APP_BASE_API } from '@/config'

export default {
  components: {
  },
  data() {
    return {
      add: {
        name: "",
        mobile: "",
        email: "",
        position: "",
      },
      action: VUE_APP_BASE_API + '/v1/common/file',
      dialogImageUrl: '',
      dialogVisibleImg: false,
      dialogVisible: false,
      handelChange: true,
      ListArr: [],
      page: [],
      pushList: [],
      certificateType: false,
      seeData: {
        id: '666',
        num: '',
        name: "",
        type: '',
        time: "",
        img: []
      },
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'roles',
      'type',
      'is_admin_view'
    ]),
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await pushIndex({ type: 2 });
        const List = await tuserList({ type: 2 });
        this.ListArr = res.list;
        this.page = res.page;
        this.pushList = List.list;
      } catch (e) {
        this.$message.error(e.message);
      }

    },
    rowClick(row) {
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await pushIndex({
          page: size
        });
        this.ListArr = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await pushIndex({
          page: currentPage
        });
        this.ListArr = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleClose_() {
      this.certificateType = false
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImg = true;
    },
    cancelAdd() {
      this.seeData = {
        id: '',
        num: '',
        name: "",
        type: '',
        time: "",
        img: []
      }
      this.certificateType = false
    },
    async addSave() {
      try {
        const {
          name,
          mobile,
          email,
          position,
        } = this.add;
        await pushAdd({
          name,
          mobile,
          email,
          position,
          type: 2
        })
        this.getList();
        this.dialogVisible = false
        this.$message.success("添加成功")
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async deleteUser(id) {
      try {
        await pushDelete({
          id: id
        })
        this.getList();
        this.$message.success("删除成功")
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImg = true;
    },
    see(id) {
      this.$router.push({
        path: '/certificateExpire',
        query: {
          id: id
        }
      })

      // certificateList({
      //   user_id: this.$store.state.user.id,
      //   push_id: id
      // }).then(res => {
      //   this.seeData.id = res[0].id
      //   this.seeData.num = res[0].number
      //   this.seeData.name = res[0].name
      //   this.seeData.type = res[0].type
      //   this.seeData.time = res[0].term_time
      //   this.certificateType = true
      //   // console.log(this.seeData, res)
      //   if (res[0].images.length > 0) {
      //     //res[0].images根据逗号分割
      //     let arr = res[0].images.split(',')
      //     // console.log(arr)

      //     arr.map((res_, index) => {
      //       // console.log(res_);
      //       let Obj = {
      //         url: res_
      //       }
      //       this.seeData.img.push(Obj)
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .el-upload {
  display: none;
}

.diff {
  color: #F05C6C;
}

.input_item {
  margin-bottom: 20px;
}
</style>
